import React, { useEffect, useState } from 'react';
import PaginationBar from "../../components/paginationbar";
import {Button, Form, Input, Modal, Table, Breadcrumb, Pagination,Row, Col, Space, Select} from "antd";
import Toolbar from "../../components/toolbar";
import common from "../../common";

function Box(props) {
    let initSearch = {}
    let [dataList, setDataList] = useState([])
    let [search, setSearch] = useState(initSearch)       // 搜索内容
    const [searchForm] = Form.useForm();
    let [query, setQuery] = useState(initSearch);

    let [pagination, setPagination] = useState({
        total: 0,
        page: 1,
        limit: 10,
    })
    const {Option} = Select;

    //----- 弹框
    let [createModalVisible, setCreateModalVisible] = useState(false)
    let [editModalVisible, setEditModalVisible] = useState(false)
    let [createForm] = Form.useForm();
    let [editForm] = Form.useForm();
    const columns = [
        {
            title: 'Id',
            dataIndex: 'id',
        },
        {
            title: '按钮盒名字',
            dataIndex: 'name',
        },
        {
            title: '产线',
            dataIndex: 'lineName',
        },
        {
            title: '工艺',
            dataIndex: 'craftName',
        },
        {
            title: '网关',
            dataIndex: 'gatewayName',
        },
        {
            title: '对应网关序列',
            dataIndex: 'devAddr',
        },
        {
            title: '盒子种类',
            dataIndex: 'categoryName',
        },
        {
            title: '操作',
            align: "center",
            width: 160,
            fixed: "right",
            render: (text, record) => {
                return (
                    <>
                        <Button type="link" onClick={() => {
                            setEditModalVisible(true)
                            editForm.setFieldsValue(record)
                        }}>编辑</Button>

                        <Button type="link" onClick={() => {
                            common.confirm("确定要删除吗?", () => {
                                del(record.id)
                            })
                        }}>删除</Button>
                    </>
                )
            }
        }
    ];

    // 获取盒子列表
    const getBoxs = () => {
        let params = {
            ...search,
            page: pagination.page,
            limit: pagination.limit,
        }
        debugger
        common.ajax("GET", "/front/box/list", params).then(data => {
            setDataList(data.list)
            setPagination(data.pagination)
        })
    }

    const create = (data) => {
        common.loadingStart()
        common.ajax("POST", "/front/box/create", data).then(() => {
            common.toast("操作成功")
            setCreateModalVisible(false)
            getBoxs()
        }).finally(common.loadingStop)
    }

    const update = (data) => {
        common.loadingStart()
        common.ajax("POST", "/front/box/update", data).then(() => {
            common.toast("操作成功")
            setEditModalVisible(false)
            getBoxs()
        }).finally(common.loadingStop)
    }

    const del = (id) => {
        common.loadingStart()
        common.ajax("POST", "/front/box/delete", {id}).then(() => {
            common.toast("操作成功")
            getBoxs()
        }).finally(common.loadingStop)
    }

    useEffect(() => {
        getBoxs()
        getGateways()
        getCategory()
        getLines()
        getCraft()
    }, [pagination.page, pagination.limit,search])

    let [gateways, setGateways] = useState([]);
    //获取网关
    const getGateways = () => {
        common.ajax("GET", "/front/gateway/list?limit=100").then(data => {
            setGateways(data.list)
        })
    }

    let [lines, setLines] = useState([]);

    //获取产线
    const getLines = () => {
        common.ajax("GET", "/front/line/list?limit=100").then(data => {
            setLines(data.list)
            getCraft()
        })
    }

    let [categorys, setCategorys] = useState([]);
    //获取盒子类型
    const getCategory = () => {
        common.ajax("GET", "/front/category/list?limit=100").then(data => {
            setCategorys(data.list)
        })
    }
    let [crafts, setCrafts] = useState([]);
    //获取盒子类型
    const getCraft = (a) => {
        let params = {
            ...a,
            page: 0,
            limit: 100,
        }
        common.ajax("GET", "/front/craft/list",params).then(data => {
            setCrafts(data.list)
        })
    }

    return (
        <div>
            <Breadcrumb>
                <Breadcrumb.Item>设备管理</Breadcrumb.Item>
                <Breadcrumb.Item>按钮盒管理</Breadcrumb.Item>
            </Breadcrumb>
            <div className="site-layout-background" style={{padding: 24, minHeight: 360}}>

                    <Button type="primary"
                            onClick={() => {
                                setCreateModalVisible(true);
                            }}>新增
                    </Button>


                <Form form={searchForm} style={{marginTop: 15}} >
                    <Row gutter={24}>
                        <Col span={6}>
                            <Form.Item label="盒子" name="name">
                                <Input placeholder="名字"  onChange={(e) => {
                                    setQuery({...query,name: e.target.value})
                                }}/>
                            </Form.Item>
                        </Col>
                        <Col span={6}>
                            <Form.Item label="产线" name="lineId">
                                <Select placeholder="产线名称" onChange={(value) => {
                                    setQuery({...query,lineId: value})
                                    getCraft({lineId: value})
                                }}>
                                    {lines.map(item => {
                                        return (<Option key={item.id} value={item.id}> {item.name}</Option>)
                                    })}
                                </Select>
                            </Form.Item>
                        </Col>
                        <Col span={6}>
                            <Form.Item label="网关" name="gatewayId">
                                <Select placeholder="网关名称" onChange={(value)=>{ setQuery({...query, gatewayId: value})}}>
                                    {gateways.map(item => {
                                        return (<Option key={item.id} value={item.id}> {item.code}</Option>)
                                    })}
                                </Select>
                            </Form.Item>
                        </Col>
                        <Col span={6}>
                            <Form.Item label="盒子种类" name="categoryId">
                                <Select placeholder="盒子种类" onChange={(value)=>{
                                    setQuery({...query, categoryId: value})}
                                }>
                                    {categorys.map(item => {
                                        return (<Option key={item.id} value={item.id}> {item.name}</Option>)
                                    })}
                                </Select>
                            </Form.Item>
                        </Col>
                        <Col span={6}>
                            <Form.Item label="工艺" name="craftId">
                                <Select placeholder="工艺" onChange={(value)=>{
                                    console.log(value)
                                    debugger
                                    setQuery({...query, craftId: value})

                                }}>
                                    {crafts.map(item => {
                                        return (<Option key={item.id} value={item.id}> {item.name}</Option>)
                                    })}
                                </Select>
                            </Form.Item>
                        </Col>
                        <Col span={6}>
                            <Form.Item>
                                <Space>
                                    <Button onClick={() => {
                                        setSearch(query)
                                    }}>搜索</Button>
                                    <Button onClick={() => {
                                        let emptySearch = {
                                            name: '',
                                            lineId:'',
                                            categoryId:'',
                                            gatewayId:'',
                                        }
                                        searchForm.setFieldsValue(emptySearch)
                                        emptySearch = {}
                                        setSearch(emptySearch)
                                        setQuery(emptySearch)
                                    }}>清空</Button>
                                </Space>
                            </Form.Item>
                        </Col>
                    </Row>
                </Form>


                <Table rowKey={columns => columns.id} columns={columns} dataSource={dataList} pagination={false}/>


                <Modal title="新增" destroyOnClose={true} footer={false} maskClosable={false} visible={createModalVisible} onCancel={() => {
                    setCreateModalVisible(false)
                }}
                >
                    <Form preserve={false}
                    labelCol={{span: 8}}
                    wrapperCol={{span: 16}}
                    form={createForm}
                    onFinish={(values) => {
                        create(values)
                    }}
                >
                    <Form.Item
                        label="盒子名称" name="name" rules={[{required: true, message: '请填写名称'}]}
                    >
                        <Input/>
                    </Form.Item>
                    <Form.Item rules={[{required: true, message: '请选择所属产线'}]}
                               name="lineId"
                               label="所属产线">
                        <Select placeholder="所属产线" onChange={(value) => {
                            getCraft({lineId: value})
                        }}>
                            {lines.map(item => {
                                return (<Option key={"lines"+item.id} value={item.id}> {item.name}</Option>)
                            })}
                        </Select>
                    </Form.Item>
                        <Form.Item rules={[{required: true, message: '请选择所属工艺'}]}
                                   name="craftId"
                                   label="所属工艺">
                            <Select placeholder="所属工艺">
                                {crafts.map(item => {
                                    return (<Option key={"crafts"+item.id} value={item.id}> {item.name}</Option>)
                                })}
                            </Select>
                        </Form.Item>
                    <Form.Item rules={[{required: true, message: '请选择所属网关'}]}
                               name="gatewayId"
                               label="所属网关">
                        <Select placeholder="所属网关">
                            {gateways.map(item => {
                                return (<Option key={"gateways"+item.id} value={item.id}> {item.name}</Option>)
                            })}
                        </Select>
                    </Form.Item>
                    <Form.Item
                        label="网关序列" name="devAddr" rules={[{required: true, message: '请填写网关序列'}]}
                    >
                        <Input type="number"/>
                    </Form.Item>
                    <Form.Item rules={[{required: true, message: '请选择盒子种类'}]}
                               name="categoryId"
                               label="请选择盒子种类">
                        <Select placeholder="请选择盒子种类">
                            {categorys.map(item => {
                                return (<Option key={"categorys"+item.id} value={item.id}> {item.name}</Option>)
                            })}
                        </Select>
                    </Form.Item>
                    <Form.Item wrapperCol={{offset: 8, span: 16}}>
                        <Button type="primary" htmlType="submit">
                            保存
                        </Button>
                    </Form.Item>
                </Form>
                </Modal>


                <Modal title="编辑" footer={false} maskClosable={false} destroyOnClose={true}  visible={editModalVisible} onCancel={() => {
                    setEditModalVisible(false)
                }}
                >
                    <Form
                        labelCol={{span: 8}}
                        wrapperCol={{span: 16}}
                        form={editForm}
                        onFinish={(values) => {
                            update(values)
                        }}
                    >
                        <Form.Item
                            hidden={true}
                            name="id"
                        >
                            <Input/>
                        </Form.Item>
                        <Form.Item
                            label="盒子名称" name="name" rules={[{required: true, message: '请填写名称'}]}
                        >
                            <Input/>
                        </Form.Item>
                        <Form.Item rules={[{required: true, message: '请选择所属产线'}]}
                                   name="lineId"
                                   label="所属产线">
                            <Select placeholder="所属产线">
                                {lines.map(item => {
                                    return (<Option key={"lines"+item.id} value={item.id}> {item.name}</Option>)
                                })}
                            </Select>
                        </Form.Item>
                        <Form.Item rules={[{required: true, message: '请选择所属工艺'}]}
                                   name="craftId"
                                   label="所属工艺">
                            <Select placeholder="所属工艺">
                                {crafts.map(item => {
                                    return (<Option key={"crafts"+item.id} value={item.id}> {item.name}</Option>)
                                })}
                            </Select>
                        </Form.Item>
                        <Form.Item rules={[{required: true, message: '请选择所属网关'}]}
                                   name="gatewayId"
                                   label="所属网关">
                            <Select placeholder="所属网关">
                                {gateways.map(item => {
                                    return (<Option key={"workshops"+item.id} value={item.id}> {item.name}</Option>)
                                })}
                            </Select>
                        </Form.Item>
                        <Form.Item
                            label="网关序列" name="devAddr" rules={[{required: true, message: '请填写网关序列'}]}
                        >
                            <Input type="number"/>
                        </Form.Item>
                        <Form.Item rules={[{required: true, message: '请选择盒子种类'}]}
                                   name="categoryId"
                                   label="请选择盒子种类">
                            <Select placeholder="请选择盒子种类">
                                {categorys.map(item => {
                                    return (<Option key={"categorys"+item.id} value={item.id}> {item.name}</Option>)
                                })}
                            </Select>
                        </Form.Item>
                        <Form.Item wrapperCol={{offset: 8, span: 16}}>
                            <Button type="primary" htmlType="submit">
                                保存
                            </Button>
                        </Form.Item>
                    </Form>
                </Modal>

                {pagination.total < 5 ? '' :
                    <PaginationBar>
                        <Pagination
                            style={{marginTop: 25}}
                            pageSizeOptions={['10', '20', '50', '100']}
                            onChange={(page, limit) => {
                                setPagination({...pagination, page, limit})
                            }}
                            onShowSizeChange={(page, limit) => {
                                setPagination({...pagination, page, limit})
                            }}
                            showTotal={total => `共${total}条`}
                            total={pagination.total}
                            defaultCurrent={pagination.page}
                            current={pagination.page}
                            defaultPageSize={pagination.limit}
                            showSizeChanger
                            showQuickJumper
                        /></PaginationBar>}

            </div>
        </div>
    );

}

export default Box;